<template>
  <view class="container" :style="appThemeStyle">
    <z-paging ref="paging" v-model="list" class="notice-list" @query="getlist">
      <!-- tab栏 -->
      <template #top>
        <view
          style="
            padding-bottom: 10rpx;
            box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.2);
          "
        >
          <div style="height: 20rpx; width: 100vw"></div>
          <view style="padding: 0 30rpx" class="f ac">
            <u-search shape="round" v-model="title" @custom="search" @clear="search"></u-search>
          </view>
        </view>
      </template>
      <!-- 订单列表 -->
      <view class="order-list">
        <view class="order-item" v-for="(item, index) in list" :key="index">
          <view class="tc fs40r fw8">
            {{ item.title }}
          </view>
          <view class="tc fs30r fw5 mt10r" style="color: #ababab">
            作者：{{ item.author }}
          </view>
          <!-- 商品列表 -->
          <view class="goods-list mt10r" @click="handleTargetDetail(item)">
            <view class="goods-item">
              <!-- 商品图片 -->
              <view class="goods-image">
                <image
                  class="image"
                  :src="item.cover"
                  mode="scaleToFill"
                ></image>
              </view>
              <!-- 商品信息 -->
            </view>
          </view>
        </view>
      </view>
    </z-paging>

    <l-calendar v-model="show" @change="change" :isRange="true"></l-calendar>
  </view>
</template>

<script>
import { article } from "../../api/index";
import ZPaging from "../../uni_modules/z-paging/components/z-paging/z-paging.vue";

// 每页记录数量
const pageSize = 15;

// tab栏数据

export default {
  components: { ZPaging },
  data() {
    return {
      list: [],
      title: "",
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.$refs.paging.reload();
  },
  /**
   * 生命周期函数--监听页面的卸载
   */

  methods: {
    async getlist(pageNo, pageNum = 10, key) {
      console.log();
      let data = {
        pageSize: pageNum,
        pageNum: pageNo,
        title: this.title,
        articleType:1
      };
      const res = await article(data);
      if (res.rows.length == 0) {
        this.$refs.paging.complete();
        return;
      }
      this.$refs.paging.complete(res.rows);
    },

    search() {
      this.getlist(1, 10);
    },
    handleTargetDetail(val) {
      uni.navigateTo({
        url: `/pages/kepu/detail?id=${val.id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 项目内容
.order-item {
  margin: 20rpx auto 20rpx auto;
  padding: 30rpx 30rpx;
  width: 94%;
  box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
  border-radius: 16rpx;
  background: #fff;
  box-sizing: border-box;
}

.order-time {
  color: #777;
  font-size: 26rpx;
}

// 项目顶部
.item-top {
  display: flex;
  justify-content: space-between;

  margin-bottom: 20rpx;

  .order-time {
    color: #777;
    font-size: 26rpx;
  }

  .state-text {
    color: $main-bg;
  }
}

// 商品列表
.goods-list {
  // 商品项
  .goods-item {
    display: flex;
    margin-bottom: 40rpx;

    // 商品图片
    .goods-image {
      // width: 180rpx;
      // height: 180rpx;
      // border: thin solid red;
      width: 100%;
      height: 300rpx;

      .image {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 15rpx;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加淡灰色阴影 */
      }
    }

    // 商品内容
    .goods-content {
      flex: 1;
      padding-left: 20rpx;

      .goods-title {
        font-size: 26rpx;
        max-height: 76rpx;
      }

      .goods-props {
        margin-top: 14rpx;
        color: #ababab;
        font-size: 24rpx;
        overflow: hidden;

        .goods-props-item {
          padding: 5rpx 0;
          border-radius: 12rpx;
          background-color: #fcfcfc;
        }
      }
    }

    // 交易信息
    .goods-trade {
      padding-top: 10rpx;
      width: 150rpx;
      text-align: right;
      color: $uni-text-color-grey;
      font-size: 26rpx;

      .goods-price {
        color: #000;
        vertical-align: bottom;
        margin-bottom: 16rpx;
        font-size: 30rpx;
        .unit {
          margin-right: -2rpx;
          font-size: 24rpx;
        }
      }
    }
  }
}

// 订单合计
.order-total {
  font-size: 26rpx;
  vertical-align: bottom;
  text-align: right;
  height: 40rpx;
  // margin-bottom: 30rpx;

  .unit {
    margin-left: 8rpx;
    margin-right: -2rpx;
    font-size: 24rpx;
  }

  .money {
    font-size: 36rpx;
    color: #000;
    font-weight: 900;
  }
}

// 订单操作
.order-handle {
  .btn-group {
    .btn-item {
      border-radius: 10rpx;
      padding: 8rpx 20rpx;
      margin-left: 15rpx;
      font-size: 26rpx;
      float: right;
      color: #383838;
      border: 1rpx solid #a8a8a8;

      &:last-child {
        margin-left: 0;
      }

      &.active {
        color: $main-bg;
        border: 1rpx solid $main-bg;
      }
    }
  }
}

//选中蓝色滑块对应
::v-deep .u-tabs__wrapper__nav[data-v-48634e29] {
  display: flex;
  flex-direction: row;
  position: relative;
  justify-content: space-between;
  white-space: nowrap;
}
::v-deep .u-tabs__wrapper__nav__line {
  flex: 1 1 0% !important;
  white-space: nowrap;
}
::v-deep .u-tabs__wrapper__nav__item {
  flex: 1 1 0% !important;
  white-space: nowrap;
}
</style>
